
<!-- 查询报告 -->
<template>
    <div class="search">
        <van-nav-bar :border="false" title="二维码推广" right-text="查询记录" @click-right="onClickRight"/>
        <img class="headImg" src="@/assets/reports/searchHeadImg.png" alt="">
        <div class="cont">
            <div class="desc1">本平台不查个人央行征信，只提供多大数据风险检测，不参与其他贷款或助贷业务。</div>
            <div class="title">真实姓名</div>
            <div class="item marginBtm15">
                <van-field v-model="name" placeholder="请输入您的真实姓名" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/register/loginNicknameIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <div class="title">身份证号码</div>
            <div class="item marginBtm15">
                <van-field v-model="idNo" type="number" placeholder="请输入您的身份证号码" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/register/realnameIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <div class="title">手机号</div>
            <div class="item marginBtm15">
                <van-field v-model="phone" type="tel" placeholder="请输入您的手机号" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/register/phoneIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <div class="pull">
                <div class="pullLeft">
                    <van-checkbox v-model="checked" icon-size="14px" checked-color="#A76E0A" shape="square">我已阅读并同意<span style="color: #A76E0A;" @click.stop="goProtocolRge">《报告查询服务协议》</span></van-checkbox>
                </div>
            </div>
            <van-button class="submit" round :color="'linear-gradient(to right, #A07D41, #FDDDAA)'" block @click="submit">立即打赏检测</van-button>
            <div class="desc2">注：本报告不涉及金融场景的应用</div>
        </div>

        <!-- 弹窗 -->
        <van-overlay :show="showDialog" z-index="998">
            <div class="dialogCont" >
                <div class="dialogContHead">特别提醒和免责声明</div>
                <div class="dislogMain">
                    <div>本平台作为大数据信息查询平台，业务范围仅有大数据报告查询服务（大数据报告并非人行征信报告）。报告仅提供给您本人了解自己的大数据情况，产生的报告不作为任何第三方下载，评估依据。同时本平台不参与任何贷款，助贷业务，请您注意甄别</div>
                    <div>1.切勿相信付费查询可以包下款</div>
                    <div>2.切勿相信付费查询可以优化征信，优化大数据。</div>
                    <div>3.切勿相信付费查询后可以多少个工作日内自动退还查询费用的。</div>
                    <div>同时本平台并未和任何贷款以及助贷机构进行合作，本报告仅提供参考以及了解自身大数据情况。查询获取的报告无法进行任何更改。</div>
                    <div class="flex dialogBtn">
                        <div></div>
                        <van-button type="primary" size="small" @click="submitOrder" round color="#D3A350">我知道了</van-button>
                    </div>
                </div>
            </div>
        </van-overlay>

        <!-- 选择支付宝或者微信 -->
        <van-popup round position="bottom" :style="{ height: '40%' }" v-model:show="showChannel">
            <div class="popHead">选择支付方式</div>
            <div class="channel flex">
                <div class="channelItem flex flexColumn allFlex alignCenter" @click="payOrder(1)">
                    <img src="@/assets/reports/aliIcon.png" alt="">
                    <div>支付宝</div>
                </div>
                <div class="channelItem flex flexColumn allFlex alignCenter" @click="payOrder(2)">
                    <img src="@/assets/reports/wechatIcon.png" alt="">
                    <div>微信</div>
                </div>
            </div>
        </van-popup>
        
    </div>
</template>

<script>
import { ref, reactive , getCurrentInstance , toRefs } from 'vue';
import { NavBar , Field , Checkbox , Button , Overlay , Popup } from 'vant';
import storage from 'store';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
export default {
    components:{
        [NavBar.name]:NavBar,
        [Field.name]:Field,
        [Checkbox.name]:Checkbox,
        [Button.name]:Button,
        [Overlay.name]:Overlay,
        [Popup.name]:Popup,
    },
    setup() {
        storage.clearAll();
        const { proxy } = getCurrentInstance();
        const onClickRight = ()=>{
            // console.log('跳转记录页面');
            proxy.$router.push({name: 'reportBill'})
        };
        const name = ref('');  // 真实姓名
        const idNo = ref('');  // 身份证号码
        const phone = ref(''); // 手机号码
        const checked = ref(true); // 协议勾选状态
        const userPromotionId = proxy.getHashParam('userPromotionId') ?? 5 // 产品用户推广配置id
        const brandId = proxy.getHashParam('brandId') ?? 1
        const orderCode = ref(''); // 提交查询后返回的订单号
        const showDialog = ref(false); // 是否展示弹框
        const showChannel = ref(false); // 选择支付通道

        // 获取系统的token
        function getToken(){
            proxy.$http.brandApi.getToken(brandId)
            .then(res=>{
                if(res.success){
                    storage.set(ACCESS_TOKEN,res[ACCESS_TOKEN], res.expires_in)
                }
            })
        }
        getToken()

        // 提交查询
        const submit = ()=>{
            if(name.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的真实姓名'})
                return
            }
            if(idNo.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的身份证号码'})
                return
            }
            if(idNo.value.length != 18){
                proxy.$toast({position: 'bottom',message:'请输入正确的身份证号码'})
                return
            }
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            showDialog.value = true
        }
        const submitOrder = () => {
            proxy.$http.brandApi.orderSubmit(userPromotionId, phone.value, name.value, idNo.value)
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    orderCode.value = res.data.orderCode;
                    showDialog.value = false
                    showChannel.value = true
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        // 产品订单支付
        const payOrder = (type) => {
            proxy.$http.brandApi.orderPay(orderCode.value, type)
            .then(res=>{
                console.log(res,'res')
                if(type == 1){
                    // 支付宝支付
                    const newTab = window.open();
                    const div = document.createElement('div');
                    div.innerHTML = res;
                    newTab.document.body.appendChild(div);
                    newTab.document.forms[0].submit();    
                }else{

                }
            })
        }

        // 跳转用户使用协议
        const goProtocolRge = () => {
            proxy.$router.push({name: 'searchAgr'})
        }
        return {
            onClickRight,
            name,
            idNo,
            phone,
            checked,
            submit,
            goProtocolRge,
            showDialog,
            submitOrder,
            showChannel,
            payOrder,
        };
    }
}

</script>
<style scoped>
.search{
    background: #232328;
    min-height: 100vh;
}
.search /deep/ .van-nav-bar__content{
    background: #232328;
}
.search /deep/ .van-badge__wrapper{
    color: #FFFFFF;
}
.search /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}
.search /deep/ .van-nav-bar__text{
    color: #FFFFFF;
}
.headImg{
    width: 100%;
}

.cont{
    margin: -18px 20.5px 20px;
    padding: 16px 15px;
    background: #FFFFFF;
    border-radius: 15px;
    position: relative;
    z-index: 99;
}
.desc1{
    color: #FB001E;
    font-size: 12px;
    text-indent: 20px;
    font-style: italic;
    margin-bottom: 10px;
}
.title{
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin-bottom: 7.5px;
    /* text-shadow: 3px 4px 3px rgba(255, 212, 0 ,.5); */
}
.item{
    /* flex: 1; */
    width: 100%;
    height: 40px;
    /* border-bottom: .5px solid #E0E0E0; */
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    border: 1px solid #E6E6E6;
    margin-bottom: 15px;
    /* padding-top: 13px; */
}
.item >>> .van-field{
    flex: 1;
    padding-left: 10px;
    max-height: 40px;
    background: none;
}
.item >>> .van-field__label{
    width: 18px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.itemRight{
    width: 245px;
}
.FieldIcon{
    width: 18px;
    height: 18px;
    display: block;
}

.pull{
    margin-bottom: 20px;
    /* text-align: center; */
    color: #B7B6B6;
    margin-top: 15px;
    font-size: 12px;
}
.submit{
    margin-bottom: 17px;
    /* margin-top: 10px; */
    border-radius: 37px;
}

.desc2{
    font-size: 12px;
    text-align: center;
    color: #FB0101;
}

/* 弹窗 */
.dialogCont{
    margin-top: 134px;
    /* bottom: 123px; */
    margin-left: 51px;
    margin-right: 51px;
    background: #FFFFFF;
    border-radius: 15px;
    /* max-height: 462px;
    overflow: auto; */
}
.dialogContHead{
    height: 43px;
    line-height: 43px;
    background: #E0E1E2;
    border-radius: 20px 20px 0 0;
    padding-left: 15.5px;
    font-size: 14px;
}
.dislogMain{
    padding: 15px 18px;
    font-size: 13px;
    line-height: 25px;
}
.dialogBtn{
    width: 100%;
    justify-content: space-between;
}

/* 支付方式 */
.popHead{
    height: 43px;
    line-height: 43px;
    background: #E0E1E2;
    border-radius: 20px 20px 0 0;
    font-size: 14px;
    text-align: center;
}
.channel{
    margin-top: 50px;
    padding: 0 30px;
}
</style>